<template>
    <div class="box">
        <!-- 面包屑导航区 -->
        <t-breadcrumb :maxItemWidth="'150'">
            <t-breadcrumbItem :to="{ path: '/dashboard' }">首页</t-breadcrumbItem>
            <t-breadcrumbItem>订单管理</t-breadcrumbItem>
            <t-breadcrumbItem :maxWidth="'160'">订单列表</t-breadcrumbItem>
        </t-breadcrumb>

        <!-- 卡片视图区域 -->
        <t-card bordered>
            <!-- 搜索与添加区域 -->
            <t-row :gutter="20">
                <t-col :span="5">
                    <div class="search">
                        <t-input v-model="queryInfo.query" clearable @clear="getOrderList" :onEnter="getOrderList"
                            placeholder="请输入内容"></t-input>
                        <t-button theme="default" @click="getOrderList"> 搜索 <search-icon slot="icon" /> </t-button>
                    </div>
                </t-col>
            </t-row>

            <!-- 用户列表区域 -->
            <t-table rowKey="index" :data="orderList" :columns="columns" stripe bordered hover resizable>
                <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
                <template #pay_status="{ row }">
                    <t-tag v-if="row.pay_status === '1'" theme="success">已付款</t-tag>
                    <t-tag v-else theme="danger">未付款</t-tag>

                </template>

                <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
                <template #create_time="{ row }">
                    {{ row.create_time | dateFormat }}
                </template>

                <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
                <template #operate="{ row }">
                    <t-space>
                        <!-- 编辑按钮 -->
                        <t-button theme="primary" size="small" @click="showBox(row.order_id)"><i
                                class="iconfont icon-bianji"></i></t-button>
                        <!-- 定位按钮 -->
                        <t-button theme="success" size="small" @click="showProgressBox"><i
                                class="iconfont icon-dingwei"></i></t-button>
                        <!-- 删除按钮 -->
                        <t-button theme="danger" size="small" @click="removeOrderById(row.order_id)"><i
                                class="iconfont icon-shanchu"></i></t-button>
                    </t-space>
                </template>

            </t-table>

            <!-- 分页 -->
            <t-pagination v-model="queryInfo.pagenum" :total="total" :pageSizeOptions="[5, 10, 15]"
                :page-size.sync="queryInfo.pagesize" @current-change="onCurrentChange"
                @page-size-change="onPageSizeChange" />
        </t-card>

        <!-- 修改订单的对话框 -->
        <t-dialog header="修改订单" :footer="false" :visible.sync="editDialogVisible" @close="editDialogClosed">
            <t-form :data="editForm" ref="editFormRef" :rules="editFormRules" @submit="editOrderInfo">
                <!-- 主体区域 -->
                <t-form-item label="是否发货" name="is_send">
                    <t-radio-group v-model="editForm.is_send">
                        <t-radio value="1">已发货</t-radio>
                        <t-radio value="0">未发货</t-radio>
                    </t-radio-group>
                </t-form-item>
                <t-form-item label="订单价格" name="order_price">
                    <t-input-number v-model="editForm.order_price" :min="0" theme="normal" align="right">
                        <template #suffix><span>元</span></template>
                    </t-input-number>
                </t-form-item>
                <t-form-item label="支付状态" name="pay_status">
                    <t-radio-group v-model="editForm.pay_status">
                        <t-radio value="1">已支付</t-radio>
                        <t-radio value="0">未支付</t-radio>
                    </t-radio-group>
                </t-form-item>

                <!-- 按钮区域 -->
                <template>
                    <div style="float: right">
                        <t-space>
                            <t-button theme="default" @click="editDialogClosed">取消</t-button>
                            <t-button theme="primary" type="submit">确定</t-button>
                        </t-space>
                    </div>
                </template>
            </t-form>
        </t-dialog>

        <!-- 展示物流进度的对话框 -->
        <t-dialog header="物流进度" :footer="false" :visible.sync="progressVisible" @close="editDialogClosed">
            <t-timeline style="height: 450px;" layout="vertical" mode="same">
                <t-timeline-item v-for="(activity, index) in progressInfo" :key="index" :label="activity.time">{{
                    activity.context }}</t-timeline-item>
            </t-timeline>
        </t-dialog>
    </div>
</template>

<script>
import { SearchIcon, } from 'tdesign-icons-vue'

export default {

    components: {
        SearchIcon
    },

    created() {
        this.getOrderList()
    },

    data() {
        return {
            // 获取订单列表的参数对象
            queryInfo: {
                query: '',
                // 当前页数
                pagenum: 1,
                pagesize: 10,
            },
            // 订单列表数据
            orderList: [],
            columns: [
                { colKey: 'index', title: '#', width: '20' },
                { colKey: 'order_number', title: '订单编号', width: '100' },
                { colKey: 'order_price', title: '订单价格', width: '30' },
                { colKey: 'pay_status', title: '是否付款', width: '30' },
                { colKey: 'is_send', title: '是否发货', width: '30' },
                { colKey: 'create_time', title: '下单时间', width: '75' },
                { colKey: 'operate', title: '操作', width: '65' },
            ],
            // 订单总数目
            total: 0,
            editDialogVisible: false,
            editForm: {
                order_id: 0,
                is_send: '',
                order_pay: 0,
                order_price: 0,
                order_number: 0,
                pay_status: '',
            },
            editFormRules: {
                is_send: [
                    {
                        required: true,
                        message: '请选择是否发货',
                        type: 'error',
                        trigger: 'blur',
                    },
                ],
                order_price: [
                    {
                        required: true,
                        message: '请输入订单价格',
                        type: 'error',
                        trigger: 'blur',
                    },
                    { whitespace: true, message: '订单价格不能为空' },
                    { min: 0, type: 'error', trigger: 'blur', message: '必须为非负数' }
                ],
                pay_status: [
                    {
                        required: true,
                        message: '请选择是否付款',
                        type: 'error',
                        trigger: 'blur',
                    },
                ],
            },
            progressVisible: false,
            // 物流信息
            progressInfo: [],
        }
    },

    methods: {

        // 获取订单列表
        async getOrderList() {

            const { data: res } = await this.$http.get('orders', { params: this.queryInfo })

            console.log(res);

            if (res.meta.status !== 200) {
                this.$message.error('获取订单列表失败！')
            } else {

                this.orderList = res.data.goods

                this.orderList.forEach((item, index) => {
                    item.index = index + 1;
                });

                this.total = res.data.total
            }

        },

        // 每页数量切换时触发
        onPageSizeChange(size, pageInfo) {
            this.queryInfo.pagesize = size
            this.getOrderList()
        },

        // 页码值切换时触发
        onCurrentChange(current, pageInfo) {
            this.queryInfo.pagenum = current
            this.getOrderList()
        },

        // 点击按钮，展示修改订单对话框
        async showBox(id) {
            // 获取订单信息
            const { data: res } = await this.$http.get('orders/' + id)

            if (res.meta.status !== 200) {
                this.$message.error('获取订单信息失败！')
            } else {
                this.editForm.order_id = res.data.order_id
                this.editForm.is_send = res.data.is_send === '是' ? '1' : '0'
                this.editForm.order_price = res.data.order_price
                this.editForm.pay_status = res.data.pay_status
            }


            this.editDialogVisible = true
        },
        // 监听对话框关闭事件，清空表单
        editDialogClosed() {
            this.$refs.editFormRef.reset()
            this.editDialogVisible = false
        },

        // 点击确定，修改订单
        async editOrderInfo({ validateResult, firstError }) {
            if (validateResult === true) {
                const { data: res } = await this.$http.put('orders/' + this.editForm.order_id, this.editForm)

                if (res.meta.status !== 201) {
                    this.$message.error('订单修改失败！')
                } else {
                    this.$message.success('订单修改成功！')
                    this.editDialogVisible = false
                    this.getOrderList()
                }
            } else {
                this.$message.warning(firstError);
            }
        },

        // 点击定位按钮，展示物流进度对话框
        async showProgressBox() {

            // 获取物流数据
            const res = {
                "data": [
                    {
                        "time": "2018-05-10 09:39:00",
                        "ftime": "2018-05-10 09:39:00",
                        "context": "已签收,感谢使用顺丰,期待再次为您服务",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 08:23:00",
                        "ftime": "2018-05-10 08:23:00",
                        "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 07:32:00",
                        "ftime": "2018-05-10 07:32:00",
                        "context": "快件到达 [北京海淀育新小区营业点]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 02:03:00",
                        "ftime": "2018-05-10 02:03:00",
                        "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 23:05:00",
                        "ftime": "2018-05-09 23:05:00",
                        "context": "快件到达 [北京顺义集散中心]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 21:21:00",
                        "ftime": "2018-05-09 21:21:00",
                        "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 13:07:00",
                        "ftime": "2018-05-09 13:07:00",
                        "context": "顺丰速运 已收取快件",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 12:25:03",
                        "ftime": "2018-05-09 12:25:03",
                        "context": "卖家发货",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 12:22:24",
                        "ftime": "2018-05-09 12:22:24",
                        "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                        "location": ""
                    },
                    {
                        "time": "2018-05-08 21:36:04",
                        "ftime": "2018-05-08 21:36:04",
                        "context": "商品已经下单",
                        "location": ""
                    }
                ],
                "meta": { "status": 200, "message": "获取物流信息成功！" }
            }

            if (res.meta.status !== 200) {
                this.$message.error('获取物流进度失败！')
            } else {
                this.progressInfo = res.data
                this.progressVisible = true
            }

        },

        // 点击按钮，删除订单
        removeOrderById(id) {
            // 弹窗询问用户是否删除数据
            const confirmDia = this.$dialog.confirm({
                header: '提示',
                body: '次操作将永久删除该订单，是否继续？',
                confirmBtn: '确定',
                cancelBtn: '取消',
                onConfirm: async ({ e }) => {
                    // console.log('confirm button has been clicked!');
                    // console.log('e: ', e);
                    const { data: res } = await this.$http.delete('orders/' + id)
                    console.log(res);
                    if (res.meta.status !== 200) {
                        this.$message.error('删除订单失败！')
                    } else {
                        this.getOrderList()
                        this.$message.success('删除订单成功！')
                        // 请求成功后，销毁弹框
                        confirmDia.destroy();
                    }
                },
                onClose: ({ e, trigger }) => {
                    this.$message.info('已取消删除')
                    // console.log('e: ', e);
                    // console.log('trigger: ', trigger);
                    confirmDia.hide();
                },
            })
        }

    },



}
</script>

<style lang="less" scoped>
.box {
    padding: 15px;

    .search {
        display: flex;
        justify-content: center;
    }
}
</style>

